<template>
	<view class="mask" @tap="cancel" @touchmove.stop>
		<view class="mask-content animated bounceInUp" @tap.stop>
			
			<text class="new-iconfont icon-close close-btn" @tap="cancel"></text>
			
			<textarea class="text-input" :placeholder="placeholder || '写下想要评论的话'" v-model="form.text"></textarea>

			<UploadImage v-model="form.images"></UploadImage>

			<!-- <view class="item">
				<view class="left">#圈子</view>
				<IPicker class="right" :list="groupList" v-model="form.group_id"></IPicker>
				<text class="new-iconfont icon-arrow-right"></text>
			</view>
			<view class="item">
				<view class="left">#话题</view>
				<IPicker class="right" :list="tagList" v-model="form.tag_id"></IPicker>
				<text class="new-iconfont icon-arrow-right"></text>
			</view> -->

			<button class="submit-btn" hover-class="hover" @tap="submit">确认发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			parentId: {
				type: String | Number
			},
			placeholder: {
				type: String
			}
		},
		data() {
			return {
				form: {
					text: '',
					images: [],
					group_id: '',
					tag_id: ''
				},
				// groupList: [],
				// tagList: [],
				isSubmit: false
			}
		},
		computed: {},
		watch: {},
		onLoad() {
			// this.initData()
		},
		onShow() {},
		onPullDownRefresh() {},
		methods: {
			cancel() {
				this.$emit('cancel')
			},
			initData() {
			},
			cleanForm () {
				this.form = {
					text: '',
					images: [],
					group_id: '',
					tag_id: ''
				}
			},
			submit() {
				if (this.isSubmit)
					return false

				if (this.form.text.length < 10) {
					uni.showToast({
						title: '至少发表10个字哦~',
						icon: 'none'
					})
					return false
				}

				// if (this.form.images.length == 0) {
				// 	uni.showToast({
				// 		title: '至少发布一张图片哦~',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }

				uni.showLoading({
					title: '发布中'
				})
				this.$http('/topic/comments', 'POST', {
					parent_id: this.parentId,
					...this.form
				}).then(res => {
					this.isSubmit = true
					uni.hideLoading()
					
					this.cleanForm()
					
					this.$emit('commentSuccess', {
						status: res.data.status
					})
				})
			}
		},
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	
	.mask-content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 880rpx;
		background-color: #EDEDED;
		background-color: white;
		border-radius: 10rpx 10rpx 0 0;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// animation: show 0.8s;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
	}
	
	.mask-content {
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		
		.close-btn {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.text-input {}

		.submit-btn {
			width: 690rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 100rpx;
			// height: 86rpx;
			// background-image: linear-gradient(#FFE998, #FFD73D);
			background: #FFD73D;
			border-radius: 100rpx;
			color: white;
			font-weight: 500;
			text-align: center;
			line-height: 76rpx;
			border: 0rpx;
			margin: 0rpx;
			font-size: 28rpx;

			&:after {
				display: none;
			}
		}

		.item {
			display: flex;
			padding: 20rpx 0rpx;
			border-bottom: 1rpx solid #f1f1f1;
			margin-bottom: 20rpx;
			align-items: center;

			.left {
				flex-grow: 1;
				color: gray;
			}

			.icon-arrow-right {
				font-size: 46rpx;
				color: #aaa;
				position: relative;
			}
		}
	}
</style>
